<!--  -->
<template>
  <div class="discount">
    <div class="bg"></div>
    <z-header title="特惠半价" id="header">
      <template v-slot:left>
        <div @click="$router.back()" class="left-wrap flex justify-center aligin-center">
          <span class="icon-left"></span>
        </div>
      </template>
    </z-header>
    <div class="img-wrap">
      <img class="img" :src="img" alt />
      <span class="rule" @click="showRule">活动规则</span>
    </div>
    <div class="divide-line"></div>
    <van-tabs v-model="active" sticky :offset-top="offsetTop" title-active-color="#EA373F" v-stream:change="tabChange$"> 
      <template v-for="(item,index) in s_productList">
        <van-tab :title="item.name">
          <div class="product-list flex justify-between">
            <template v-for="(item,index) in item.productList">
              <router-link
                tag="div"
                class="product-item"
                :key="index"
                :to="{name:'discountDetail',params:{id: item.id}}"
              >
                <div
                  v-if="item.open_status==2"
                  class="product-item-mask flex justify-center f-18 color-red"
                >
                  <span class="tag color-white f-12 flex justify-center aligin-center">已结束</span>
                </div>
                <div
                  class="peroid flex aligin-center justify-center color-white"
                >第{{item.issue_id}}期/{{item.issue_num?'共'+item.issue_num:'不限'}}期</div>
                <img class="product-img" :src="item.content_image" alt />
                <div class="product-name ellipsis-line2">{{item.name}}</div>
                <div class="price-wrap">
                  <span class="price">￥{{item.price}}</span>
                  <span class="price-discount">￥{{item.offer_price}}</span>
                </div>
                <div class="rest" v-if="item.surplus">仅剩{{item.surplus}}名额</div>
              </router-link>
            </template>
          </div>
        </van-tab>
      </template>
    </van-tabs>

    <!-- 中奖规则 -->
    <Rule ref="rule" :rule="rule" :flag.sync="ruleFlag" @closeDialog="ruleFlag=false"></Rule>
  </div>
</template>

<script>
import page from '../../mixin/page.js'
import { discount, discount_module } from '../../api/api'
import { fromEvent, from, merge, empty, of, concat } from 'rxjs'
import {
  switchMap,
  tap,
  map,
  concatMap,
  filter,
  throttleTime
} from 'rxjs/operators'
import Rule from '../../components/Rule'
import { Tab, Tabs } from 'vant'
export default {
  mixins: [page],
  components: { Rule, vanTab: Tab, vanTabs: Tabs },
  domStreams: ['tabChange$'],
  subscriptions() {
    let scroll = fromEvent(window, 'scroll').pipe(
      //判断是否滚动到底部
      filter(() => {
        let element = {}
        if (document.documentElement.scrollTop) {
          element = document.documentElement
        } else if (document.body.scrollTop) {
          element = document.body
        }
        return this.isScrollEnd(element)
      }),
      //判断是否还有数据未加载
      filter(this.noData),
      //截流
      throttleTime(500)
    )
    let tabEvent = this.tabChange$.pipe(
      filter(()=>!this.categoriesList[this.active].productList.length)
    )
    //初始化 活动事件
    let init = of(1).pipe(
      concatMap(() => discount_module()),
      tap(({ data: { result } }) => {
        this.img = result.image
        this.rule = result.rule
        this.categoriesList = result.categories.map(item => {
          return { current_page: 0, last_page: 1, productList: [], ...item }
        })
        console.log('this.categoriesList', this.categoriesList)
      })
    )
    let subscribtion = merge(init, scroll,tabEvent).pipe(
      //替换
      switchMap(() =>
        discount({
          id: this.categoriesList[this.active].id,
          page: this.categoriesList[this.active].current_page + 1
        })
      ),
      map(res => {
        if (res.data.result && res.data.result.length != 0) {
          this.$set(this.categoriesList[this.active], 'productList', [
            ...this.categoriesList[this.active].productList,
            ...res.data.result
          ])
          this.$set(
            this.categoriesList[this.active],
            'current_page',
            this.categoriesList[this.active].current_page + 1
          )
          this.$set(
            this.categoriesList[this.active],
            'last_page',
            this.categoriesList[this.active].last_page + 1
          )
        } else {
          this.$set(
            this.categoriesList[this.active],
            'current_page',
            this.categoriesList[this.active].last_page
          )
        }
        return this.categoriesList
      })
    )
    return { s_productList: subscribtion }
  },
  data() {
    return {
      productList: [],
      ruleFlag: false,
      img: '',
      rule: '',
      active: 0,
      categoriesList: [],
      offsetTop: 0
    }
  },
  computed: {},
  watch: {},
  methods: {
    noData() {
      return (
        this.categoriesList[this.active].current_page !=
        this.categoriesList[this.active].last_page
      )
    },
    showRule() {
      this.ruleFlag = true
    }
  },
  created() {},
  mounted() {
    this.offsetTop = document.getElementById('header').offsetHeight
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
.discount /deep/ .z-header {
  background: #ea373f;
  color: #fff;
}
.discount /deep/ .border-bottom-1px::after {
  border-bottom: none;
}
.discount {
  position: relative;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: url('../../assets/imgs/discount-bg.png');
    background-size: 100% 100%;
    height: 136px;
  }
  .left-wrap {
    height: 100%;
    width: 100%;
    .icon-left {
      width: 24px;
      height: 24px;
      background: url('../../assets/imgs/arrow-left-white.png');
      background-size: 100% 100%;
    }
    .icon-right {
      width: 18px;
      height: 18px;
      background: url('../../assets/imgs/coupon.png');
      background-size: 100% 100%;
    }
  }
  .img-wrap {
    position: relative;
    padding-top: 81px;
    margin: 0 15px 25px;
    height: 198px;
    .img {
      height: 100%;
      width: 100%;
      border-radius: 5px;
    }
  }
  .rule {
    position: absolute;
    top: 91px;
    right: 10px;
    width: 53px;
    height: 18px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 9px;
  }
  .product-list {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 19px 16px;
    min-height: calc(100vh - 80px);
    .product-item {
      position: relative;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-radius: 8px;
      box-shadow: 0.13333rem 0.13333rem 0.53333rem rgba(162, 162, 162, 0.19);
      .product-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        z-index: 88;
      }
      .tag {
        margin-top: 80px;
        opacity: 1;
        width: 69px;
        height: 24px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        background: #ff6a6e;
      }
      .peroid {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 5px;
        white-space: nowrap;
        height: 23px;
        font-size: 11px;
        background: url('../../assets/imgs/peroid.png');
        background-size: 100% 100%;
      }
      .product-img {
        height: 160px;
        width: 160px;
        border-radius: 5px;
      }
      .product-name {
        margin-left: 10px;
        margin-top: 11px;
        font-size: 12px;
        line-height: 16px;
        height: 32px;
        width: 150px;
      }
      .price-wrap {
        margin-left: 10px;
        margin-top: 8px;
        .price {
          font-size: 12px;
          color: #ea373f;
        }
        .price-discount {
          margin-left: 8px;
          font-size: 12px;
          color: #cfcfcf;
          text-decoration: line-through;
        }
      }
      .rest {
        margin-left: 10px;
        margin-top: 13px;
        font-size: 10px;
        color: #767676;
      }
    }
  }
}
</style>